<template>
  <div class="comment-post">
    <van-field
      class="post-field"
      v-model.trim="message"
      placeholder="写评论"
      rows="2"
      maxlength="50"
      show-word-limit
      autosize
      type="textarea"
    />
    <van-button class="post-btn" @click="commBtn" :disabled="!message.length">发布</van-button>
  </div>
</template>
           
<script>
import { addComments_api } from "@/api/article/index";
export default {
  props: {
    target: {
      type: [Array, Number, Object],
      required: true
    }
  },
  //依赖注入  获取父组件的传值
  inject:{
      artId:{
          type:[Array,Object,Number,String],
          default:null
      }
  },
  data() {
    return {
      message: "",
      // artId:this.$route.params.artId
    };
  },
  methods: {
    //点击发布评论
    async commBtn() {
      console.log(this.artId,'iiiiiiii');
      this.$toast.loading({
        message: "发布中...",
        forbidClick: true,
        duration: 0 //加载持续时间，设置0  如果登录不成功就一直显示
      });
      try {
        if (this.message.trim().length) {
          const { data: res } = await addComments_api({
            target: this.target,
            content: this.message,
            art_id: this.artId ? this.artId.toString() : null
          });
          // console.log(res,'ddddd')
          this.$toast("发布成功");
          this.message = "";
          //发布成功后，关闭弹出层
          this.$emit("post-success", res.data);
        } else {
          this.$toast("内容不能为空");
        }
      } catch (error) {
        this.$toast("发布失败");
      }
    }
  }
};
</script>
<style scoped lang="less">
.comment-post {
  display: flex;
  align-items: center;
  padding: 32px 0 32px 32px;
  .post-field {
    background-color: #f5f7f9;
  }
  .post-btn {
    width: 150px;
    border: none;
    padding: 0;
    color: #6ba3d8;
    &::before {
      display: none;
    }
  }
}
</style>